<template>
  <div class="container" :style="{ height: height }">
    <div class="title_container">
      <span class="title"></span>
      <span style="margin-left: 10px; font-size: 20px; color: #1cdbfe">
        智能设备在线情况</span
      >
    </div>
    <el-scrollbar style="height: 220px">
      <div style="margin-top: 10px">
        <div class="title-continer">
          <div style="flex: 2" class="one">设备大类</div>
          <div
            class="two"
            style="background: rgba(26, 46, 142, 0.5); color: #1cdbfe"
          >
            设备数量（台）
          </div>
          <div
            class="two"
            style="background: rgba(26, 46, 142, 0.5); color: #e4c431"
          >
            在线数量（台）
          </div>
        </div>
        <div
          class="title-continer"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div style="flex: 2" class="one">{{ item.typeName }}</div>
          <div class="two" style="color: #1cdbfe">{{ item.deviceNum }}</div>
          <div class="two" style="color: #e4c431">{{ item.onlineNum }}</div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { getIntellijDeviceOnlineNum } from '@/api/dataScreen/index';
export default {
  data() {
    return {
      height: "270px",
      tableData: [],
    };
  },
  methods: {
    // 根据数值大小返回气泡的大小
    IntellijDeviceOnlineNum() {
      getIntellijDeviceOnlineNum().then((res) => {
        this.tableData = res.intellijDeviceOnlineNum
      });
    },
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },

  // watch: {
  //   isFullscreen: {
  //     handler(newValue, oldValue) {
  //       if (newValue == true) {
  //         this.height = '280px';
  //       } else {
  //         this.height = '270px';
  //       }
  //     },
  //   },
  // },
  mounted() {
    this.IntellijDeviceOnlineNum()
  },
};
</script>
<style scoped lang="scss">
.container {
  //height: 270px;
  padding: 10px 20px;
  //background: #06073B;
  border-radius: 7px;
  box-shadow: rgb(8, 79, 160) 0px 0px 40px inset;
  border: 2px solid rgb(8, 79, 160);
  background-color: transparent;
  .title_container {
    display: flex;
    align-items: center;
    .title {
      width: 13px;
      height: 27px;
      background: #1cdbfe;
      border-radius: 6px;
      display: inline-block;
    }
  }
  .title-continer {
    display: flex;
    justify-content: center;
    align-items: center;

    border-top: 2px solid #1a2e8e;
    .one {
      height: 28px;
      text-align: left;
      padding-left: 10px;
      line-height: 28px;
      border-left: 2px solid #1a2e8e;
      border-right: 2px solid #1a2e8e;
      background: rgba(26, 46, 142, 0.5);
      //opacity: 0.5;
    }
    .two {
      flex: 1.5;
      height: 28px;
      text-align: center;
      line-height: 28px;
      border-right: 2px solid #1a2e8e;
    }
  }
}
</style>
